<script setup lang="ts">
import { ref, reactive } from 'vue'
import Cookies from 'js-Cookie'
import { useRouter } from 'vue-router'
import { login, MatchUser } from '../../http/api'

import img_web from '../../../static/img/login-bg-web.jpg'
import logo from '../../../static/img/logo.jpg'
import type { FormInstance } from 'element-plus'
// import flag from '../../hooks/changePhoneFlag'
import { ElMessage } from 'element-plus'
import { ms } from '../../utils/timeer'
import cascader from '../../components/cascader/index.vue'
const router = useRouter()

const phoneflag = false

const loading = ref<boolean>(false)

interface T {
    id: string,
    pwd: string
}
const ruleFormRef = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
const formLabelAlign = reactive<T>({
    id: '',
    pwd: ''
})
const validateName = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入id'))
    }
    setTimeout(() => {
        callback()
    }, 200)
}
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}
const rules = reactive({
    id: [{ validator: validateName, trigger: 'blur' }],
    pwd: [{ validator: validatePass, trigger: 'blur' },],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            loading.value = true
            await login({ id: parseInt(formLabelAlign.id), password: formLabelAlign.pwd }).then((res: any) => {
                if (res.code === 611111) {

                    Cookies.set('city_id', res.user_info.city_id, { expires: 1 })
                    Cookies.set('district_id', res.user_info.district_id, { expires: 1 })
                    Cookies.set('user_id', res.user_info.id, { expires: 1 })
                    Cookies.set('username', res.user_info.username, { expires: 1 })
                    Cookies.set('gender', res.user_info.gender, { expires: 1 })
                    Cookies.set('city', res.city, { expires: 1 })
                    Cookies.set('district', res.district, { expires: 1 })
                    Cookies.set('user_type', res.user_info.user_type, { expires: 1 })
                    Cookies.set('super_admin', res.user_info.super_admin, { expires: 1 })
                    Cookies.set('high_admin', res.user_info.high_admin, { expires: 1 })
                    Cookies.set('mid_admin', res.user_info.mid_admin, { expires: 1 })
                    Cookies.set('AccessToken', res.access, { expires: 1 })
                    Cookies.set('RefreshToken', res.refresh, { expires: 1 })
                    Cookies.set('LoginState', 'true', { expires: 1 })
                    router.push({ name: 'nav' })
                }
                else if (res.code === 600005 || res.code === 600003) {
                    ElMessage({
                        message: "账号或密码错误",
                        type: 'error',
                    })
                }
                else if (res.code === 600012) {
                    ElMessage({
                        message: `错误次数超过5次，请${ms(res.time_left)}后再重试`,
                        type: 'error',
                    })
                }

            })
            loading.value = false
        } else {
            return false
        }
    })
}

const linkTo = () => {
    router.push({ name: "reg" })
}


const centerDialogVisible = ref<boolean>(false)
const ruleForm = reactive<any>({
    username: '',
    district_id: -1,
})
const change = (data: any) => {
    ruleForm.city_id = data[1][0]
    ruleForm.district_id = data[1][1]
}


const validateName2 = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入姓名'))
    }
    setTimeout(() => {
        callback()
    }, 200)
}
const validateDis = (rule: any, value: any, callback: any) => {
    if (value === -1) {
        return callback(new Error('请选择地区'))
    }
    setTimeout(() => {
        callback()
    }, 200)
}
const rules2 = reactive({
    username: [{ validator: validateName2, trigger: 'blur' }],
    district_id: [{ validator: validateDis, trigger: 'blur' },],
})

const idList = ref<any>([])
const submitForm2 = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            MatchUser(ruleForm).then((res: any) => {
                if (res.matched) {
                    idList.value = res.matched
                }
            })
        } else {
            return false
        }
    })
}

</script>

<template>
    <div class="page">
        <!-- <img v-if="phoneflag" :src="img_phone" alt=""> -->
        <img :src="img_web" alt="">
        <div :class="{ headweb: !phoneflag, headphone: phoneflag }" element-loading-text="登录中..."
            element-loading-background="rgba(122, 122, 122, 0.8)">
            <div class="logo">
                <div>
                    <img @click="router.push({ name: 'index' })" :src="logo" alt="" class="img">
                    <div>登录</div>
                </div>
                <el-button type="success" @click="router.push({ name: 'index' })">回到首页</el-button>
            </div>
            <el-form :model="formLabelAlign" label-width="50px" ref="ruleFormRef" :rules="rules">
                <el-form-item label="id:" class="" prop="id">
                    <el-input v-model="formLabelAlign.id" placeholder="请输入id" />
                </el-form-item>
                <el-form-item label="密码:" prop="pwd">
                    <el-input v-model="formLabelAlign.pwd" type="password" maxlength="18" placeholder="请输入密码"
                        show-password />
                </el-form-item>

                <el-form-item class="button">
                    <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading">登录</el-button>
                    <el-button @click="linkTo">没有账号？点击注册</el-button>
                    <el-button type="danger" @click="centerDialogVisible = true">忘记账号？</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center :close-on-press-escape="false"
        :show-close="false" :close-on-click-modal="false">
        <el-form :model="ruleForm" label-width="150px" ref="ruleFormRef2" :rules="rules2">
            <el-form-item label="姓名:" class="" prop="username">
                <el-input v-model="ruleForm.username" placeholder="请输入姓名" />
            </el-form-item>

            <el-form-item label="学校所在地区:" class="" prop="district_id">
                <cascader :msg="'area'" @change="change" :placeholder="'请选择地区'" />


            </el-form-item>
        </el-form>
        <div v-if="idList.length !== 0" style="text-align:center">您的登录账号id可能为:<span v-for="item in idList"
                style="margin-right: 5px;">{{ item }}</span></div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm2(ruleFormRef2)">
                    查询
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    >img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }

    .headweb {
        position: absolute;
        width: 500px;
        height: 350px;
        box-sizing: border-box;
        top: calc(50% - 175px);
        left: calc(50% - 250px);
        display: flex;
        flex-direction: column;
        // border: 5px solid rgb(54, 171, 161);
        background-color: rgb(201, 227, 228);
        border-radius: 10px;
        color: #000;

        // .el-form-item {
        //     margin-bottom: 30px;
        // }

        .logo {
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
            font-size: 20px;
            display: flex;
            width: 100%;
            align-items: center;
            padding: 20px 40px 40px 40px;
            box-sizing: border-box;
            justify-content: space-between;

            >:nth-child(1) {
                display: flex;
                align-items: center;
            }

            .img {
                cursor: pointer;
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }
        }
    }

    .headphone {
        position: absolute;
        width: 80vw;
        height: 50vh;
        box-sizing: border-box;
        top: calc(50% - 25vh);
        left: calc(50% - 40vw);
        display: flex;
        flex-direction: column;
        border: 5px solid rgb(54, 171, 161);
        background-color: rgb(55, 59, 68);
        border-radius: 10px;
        color: yellow;

        .logo {
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
            font-size: 20px;
            display: flex;
            width: 100%;
            align-items: center;
            padding: 20px 40px 40px 40px;
            box-sizing: border-box;
            justify-content: space-between;

            >:nth-child(1) {
                display: flex;
                align-items: center;
            }

            .img {
                cursor: pointer;
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }
        }

        .button {
            :deep(.el-form-item__content) {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

        }
    }

    .el-form {
        width: 80%;
        margin-left: 10%;

        // margin-top: 20px;
        :deep(.el-form-item__label) {
            color: #000;
        }
    }
}
</style>